<template>
	<view class="serverBox">
		<button class="serverItem" @click="callPhone">
			<view class="leftCnt">
				<image class="icon" src="../../../static/images/user/kefurexian.png" mode="aspectFit"></image>
				<view class="info">
					<view class="top">24小时全国服务热线</view>
					<view class="btm">技术及商务咨询</view>
				</view>
			</view>
			<image class="rightIcon" src="../../../static/images/more.png" mode="aspectFit"></image>
		</button>
		<button class="serverItem" open-type="contact">
			<view class="leftCnt">
				<image class="icon" src="../../../static/images/user/weixin.png" mode="aspectFit"></image>
				<view class="info">
					<view class="top">客服微信</view>
					<view class="btm">微信一对一为您服务</view>
				</view>
			</view>
			<image class="rightIcon" src="../../../static/images/more.png" mode="aspectFit"></image>
		</button>
	</view>
</template>

<script>
	import {
		configPhone
	} from "@/Service/homeService.js";
	export default {
		data() {
			return {
				customerPhone: ''
			}
		},
		onLoad() {
			// 获取客服电话
			configPhone().then(({
				data
			}) => {
				this.customerPhone = data;
			}).catch(er => {
				// uni.showToast({
				// 	title: "",
				// 	icon: "none"
				// });
			})
		},
		methods: {
			callPhone() {
				if (this.customerPhone) {
					uni.makePhoneCall({
						phoneNumber: this.customerPhone
					});
				} else {

				}
			}
		}
	}
</script>

<style>
	/* 去除button默认样式 */
	page{
		font-family: Source Han Sans CN;
	}
	
	button::after {
		border: none;
	}

	button {
		background-color: transparent;
		padding-left: 0;
		padding-right: 0;
		line-height: inherit;
	}

	button {
		border-radius: 0;
	}

	.serverBox {
		border-top: 20upx solid #f8f8f8;
		/* width: 100%; */
		padding: 45upx 25upx;
	}

	.serverItem,
	.leftCnt {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.serverItem {
		background: #fcfaff;
		box-sizing: border-box;
		padding: 25upx 20upx;
		border-radius: 8upx;
		margin-bottom: 45upx;
	}

	.leftCnt {
		font-size: 30upx;
	}

	.leftCnt .info {
		text-align: left;
		margin-left: 20upx;
		padding-left: 20upx;
		position: relative;
	}

	.leftCnt .info::after {
		content: '';
		position: absolute;
		width: 2upx;
		height: 65%;
		background: #f0eef4;
		top: 50%;
		left: -1upx;
		transform: translateY(-50%);
	}

	.btm {
		font-size: 24upx;
		color: #c6c7cd;
		margin-top: 8upx;
	}


	.leftCnt .icon {
		width: 75upx;
		height: 75upx;
	}

	.rightIcon {
		width: 14upx;
		height: 24upx;
	}
</style>
